
<template>

  <div >
    <el-card >
    <div class="flex flex-wrap gap-4">
      <el-radio-group v-model="getListParme.checkstatus" @change="changetitle">
<!--        <el-radio-button value="" label="全部"></el-radio-button>-->
        <el-radio-button
            v-for="(option, index) in borderCardOptions"
            :key="index"
            :value="option.value"
            >
         {{option.name}}({{option.count}})
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="flex-input">
      <div>
        <el-input  v-model="getListParme.projectName"   placeholder="项目名称" />
      </div>
      <div>
        <el-input v-model="getListParme.chargerName"  placeholder="负责人" />
      </div>
      <div class="data-flex">
        <div>
          <el-date-picker
              v-model="valueDate"
              :type="year"
              style="width: 250px"
              range-separator="至"
              start-placeholder="申请外拨开始时间"
              end-placeholder="申请外拨结束时间"

          />
        </div>
        <div>
          <!--          <el-radio-group v-model="year" aria-label="size control">-->
          <!--            <el-radio-button value="daterange">年/月/日</el-radio-button>-->
          <!--            <el-radio-button value="monthrange">月</el-radio-button>-->
          <!--            <el-radio-button value="yearrange">年</el-radio-button>-->
          <!--          </el-radio-group>-->
          <div class="data-selete">
            <el-select
                v-model="year"
                placeholder="请选择"
                style="width: 100px"
                @change="valueDate=[]"
            >
              <el-option
                  v-for="item in optionsdata"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>

          </div>
        </div>
      </div>
      <div>
        <el-select
            v-model="getListParme.unitId"
            multiple
            collapse-tags
            filterable
            collapse-tags-tooltip
            placeholder="所属单位"
            @focus="getzhichengOptions"
        >
          <el-option
              v-for="item in zhichengOptions"
              :key="item.codeColumn"
              :label="item.valueColumn"
              :value="item.codeColumn"
          />
        </el-select>
      </div>
      <div style="min-width: 180px">
        <el-button type="primary" icon="Search" @click="confirmClick">查询</el-button>
        <el-button  icon="Search" @click="reset">重置</el-button>
      </div>

    </div>
    </el-card>
    <el-card style="margin-top: 10px">
    <jfwbTable ref="getchildList" :getListParme="getListParme"   v-model="getListParme"></jfwbTable>
    </el-card>

  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import jfwbTable from '@/views/money/jfwb/jfwbTable.vue';
import { formatDate } from '@/utils/formatTime';
import {
  getCategory,
  listtotal,
  list
} from '@/api/money/jfwbApi'
import {onBeforeMount,watchEffect} from "vue";
const reset = () => {
  for (const key in getListParme.value) {
    if (typeof getListParme.value[key] === 'object' && getListParme.value[key]!== null) {
      // 处理嵌套对象
      for (const subKey in getListParme.value[key]) {
        getListParme.value[key][subKey] = '';
      }
    } else {
      getListParme.value[key] = '';
    }
    // 单独处理 unitId，将其置为空数组
    if (key === 'unitId') {
      getListParme.value[key] = [];
    }
  }
  // 清空 valueDate
  valueDate.value = [];
}
// 创建一个 ref 来引用子组件
const getchildList = ref(null);

const changetitle = () => {
  getchildList.value.getList();
}
const confirmClick = function (){
  console.log(getListParme.value)
  if (valueDate.value && valueDate.value.length === 2) {
    if (year.value === 'yearrange') {
      valueDate.value = [
        new Date(valueDate.value[0].getFullYear(), 0, 1),
        new Date(valueDate.value[1].getFullYear(), 11, 31)
      ];
    } else if (year.value ==='monthrange') {
      valueDate.value = [
        new Date(valueDate.value[0].getFullYear(), valueDate.value[0].getMonth(), 1),
        new Date(valueDate.value[1].getFullYear(), valueDate.value[1].getMonth() + 1, 0)
      ];
    }
    getListParme.value.params.beginTime = formatDate(valueDate.value[0]);
    getListParme.value.params.endTime = formatDate(valueDate.value[1]);
  }else {
    // 如果 valueDate 为空，将 beginTime 和 endTime 置为空字符串
    getListParme.value.params.beginTime = '';
    getListParme.value.params.endTime = '';
  }

  getchildList.value.getList();

}
//头部选项卡
const borderCardOptions = ref([])
//所属单位
const zhichengOptions = ref([])

//时间区间选择
const optionsdata = [
  {
    value: 'daterange',
    label: '年/月/日',
  },
  {
    value: 'monthrange',
    label: '月',
  },
  {
    value: 'yearrange',
    label: '年',
  },

]

const year = ref<'daterange' | 'monthrange' | 'yearrange'>('daterange')

const valueDate = ref([])
//时间区间选择end
const getListParme = ref({
  checkstatus:'', //全部‘’ 头部选项卡
  chargerName:'', //负责人
  projectName:'',//项目名称
  orderByColumn:"b.outbounddate",
  isAsc:"descending",
  params:{
    beginTime:'',//开始时间
    endTime:'',//结束时间
  },
  unitId:[],//所属单位

})
// 监听 getListParme 变化，将 unitId 数组转换为字符串
watchEffect(() => {

});
const getzhichengOptions = function (){
  getCategory({
    'bizName':'成果归属单位'
  })
      .then((res)=>{
        zhichengOptions.value = res.data
      })
}

onBeforeMount(()=>{
console.log(getListParme.value)
  // if (valueDate.value && valueDate.value.length === 2) {
  //   // 将选择的年份范围设置为1月1号
  //   valueDate.value = [
  //     new Date(valueDate.value[0].getFullYear(), 0, 1),
  //     new Date(valueDate.value[1].getFullYear(), 0, 1)
  //   ];
  //   getListParme.value.params.beginTime = valueDate.value[0]
  //   getListParme.value.params.endTime = valueDate.value[1]
  // }
  listtotal(
      getListParme.value
  )
      .then((res)=>{
        borderCardOptions.value =res.data
      })

})

</script>
<style scoped lang="scss">
.app-container{

}
.flex-input{
  display: flex;
  margin: 10px 5px 10px 0;
}
.flex-input > div{
  margin-right: 10px;
  display: flex;
  width: 30%;
}
//.flex-input > div >div:first-child{
//  font-size: 13px;
//  width: 40%;
//}
.data-flex{
  display: flex;
  margin: 0 10px;
  div:first-child{
    margin-right: 10px;
  }
}
.title-flex{
  display: flex;
  justify-content: space-between;
  text-align: center;

}
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 设置标题宽度 */
:deep(.el-descriptions__label) {
  width: 200px;
}

/* 让内容居中显示 */
:deep(.el-descriptions__content) {
  text-align: center;
}
.title-col{
  color: #337AB7;
  font-weight: bolder;
}
.data-selete{
  width: 100px;
}
</style>